<template>
	<view class="park-info-container">
		<!-- 园区封面图 -->
		<view class="park-banner">
			<swiper class="banner-swiper" circular indicator-dots autoplay>
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image class="banner-image" :src="item.image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 园区基本信息 -->
		<view class="park-basic-info">
			<view class="park-name">智慧科技产业园</view>
			<view class="park-address">
				<text class="address-icon">📍</text>
				<text class="address-text">上海市浦东新区张江高科技园区科苑路88号</text>
			</view>
			<view class="park-contact">
				<text class="contact-item">📞 联系电话：021-12345678</text>
				<text class="contact-item">📧 邮箱：info@smartpark.com</text>
			</view>
		</view>
		
		<!-- 功能导航 -->
		<view class="function-nav">
			<view class="nav-item" @click="navigateTo('intro')">
				<image class="nav-icon" src="/static/icons/intro.png"></image>
				<text class="nav-text">园区介绍</text>
			</view>
			<view class="nav-item" @click="navigateTo('facility')">
				<image class="nav-icon" src="/static/icons/facility.png"></image>
				<text class="nav-text">设施服务</text>
			</view>
			<view class="nav-item" @click="navigateTo('traffic')">
				<image class="nav-icon" src="/static/icons/traffic.png"></image>
				<text class="nav-text">交通指南</text>
			</view>
			<view class="nav-item" @click="navigateTo('policy')">
				<image class="nav-icon" src="/static/icons/policy.png"></image>
				<text class="nav-text">政策解读</text>
			</view>
		</view>
		
		<!-- 园区介绍 -->
		<view class="info-section">
			<view class="section-header">
				<text class="section-title">园区介绍</text>
				<text class="section-more" @click="viewMore('intro')">查看更多 ></text>
			</view>
			<view class="section-content">
				<text class="section-text">智慧科技产业园是一座集研发、办公、商业、生活配套于一体的现代化产业园区，总占地面积约50万平方米，建筑面积约100万平方米。园区以"科技创新、绿色智慧"为理念，致力于打造一流的科技创新生态系统。</text>
				<text class="section-text">园区引入了智能化管理系统，包括智慧停车、智能门禁、能源管理等多项智能化服务，为入驻企业提供高效、便捷、舒适的办公环境。</text>
			</view>
		</view>
		
		<!-- 设施服务 -->
		<view class="info-section">
			<view class="section-header">
				<text class="section-title">设施服务</text>
				<text class="section-more" @click="viewMore('facility')">查看更多 ></text>
			</view>
			<view class="facility-grid">
				<view class="facility-item" v-for="(item, index) in facilityList" :key="index">
					<image class="facility-icon" :src="item.icon"></image>
					<text class="facility-name">{{ item.name }}</text>
				</view>
			</view>
		</view>
		
		<!-- 交通指南 -->
		<view class="info-section">
			<view class="section-header">
				<text class="section-title">交通指南</text>
				<text class="section-more" @click="viewMore('traffic')">查看更多 ></text>
			</view>
			<view class="traffic-info">
				<view class="traffic-item">
					<text class="traffic-type">🚇 地铁：</text>
					<text class="traffic-desc">2号线张江高科站，步行约10分钟</text>
				</view>
				<view class="traffic-item">
					<text class="traffic-type">🚌 公交：</text>
					<text class="traffic-desc">983路、张江1路、浦东45路等多条线路</text>
				</view>
				<view class="traffic-item">
					<text class="traffic-type">🚗 自驾：</text>
					<text class="traffic-desc">沪南高速 - 科苑路出口，园区内设有充足停车位</text>
				</view>
			</view>
			<view class="map-container">
				<image class="map-image" src="/static/map.jpg" mode="widthFix"></image>
				<view class="map-btn" @click="openMap">查看地图导航</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bannerList: [
				{ image: '/static/banner1.jpg' },
				{ image: '/static/banner2.jpg' },
				{ image: '/static/banner3.jpg' }
			],
			facilityList: [
				{ name: '会议室', icon: '/static/icons/meeting.png' },
				{ name: '餐厅', icon: '/static/icons/restaurant.png' },
				{ name: '健身房', icon: '/static/icons/gym.png' },
				{ name: '停车场', icon: '/static/icons/parking.png' },
				{ name: '咖啡厅', icon: '/static/icons/cafe.png' },
				{ name: '超市', icon: '/static/icons/market.png' },
				{ name: '医务室', icon: '/static/icons/medical.png' },
				{ name: '休息区', icon: '/static/icons/rest.png' }
			]
		}
	},
	methods: {
		// 导航到不同页面
		navigateTo(type) {
			uni.showToast({
				title: `${type}功能开发中`,
				icon: 'none'
			})
		},
		
		// 查看更多信息
		viewMore(type) {
			uni.showToast({
				title: `${type}详情功能开发中`,
				icon: 'none'
			})
		},
		
		// 打开地图导航
		openMap() {
			uni.showToast({
				title: '地图导航功能开发中',
				icon: 'none'
			})
		}
	}
}
</script>

<style>
.park-info-container {
	background-color: #F8F8F8;
	min-height: 100vh;
}

.park-banner {
	width: 100%;
	height: 400rpx;
}

.banner-swiper {
	width: 100%;
	height: 100%;
}

.banner-image {
	width: 100%;
	height: 100%;
}

.park-basic-info {
	background-color: #FFFFFF;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.park-name {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.park-address {
	display: flex;
	align-items: flex-start;
	margin-bottom: 10rpx;
}

.address-icon {
	margin-right: 10rpx;
}

.address-text {
	font-size: 28rpx;
	color: #666;
	flex: 1;
}

.park-contact {
	margin-top: 20rpx;
}

.contact-item {
	display: block;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.function-nav {
	background-color: #FFFFFF;
	display: flex;
	justify-content: space-around;
	padding: 30rpx 0;
	margin-bottom: 20rpx;
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nav-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}

.nav-text {
	font-size: 24rpx;
	color: #333;
}

.info-section {
	background-color: #FFFFFF;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.section-more {
	font-size: 24rpx;
	color: #007AFF;
}

.section-content {
	padding: 10rpx 0;
}

.section-text {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
	margin-bottom: 20rpx;
	display: block;
}

.facility-grid {
	display: flex;
	flex-wrap: wrap;
}

.facility-item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30rpx;
}

.facility-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}

.facility-name {
	font-size: 24rpx;
	color: #333;
}

.traffic-info {
	margin-bottom: 30rpx;
}

.traffic-item {
	display: flex;
	margin-bottom: 15rpx;
}

.traffic-type {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-right: 10rpx;
	width: 120rpx;
}

.traffic-desc {
	font-size: 28rpx;
	color: #666;
	flex: 1;
}

.map-container {
	position: relative;
}

.map-image {
	width: 100%;
	border-radius: 10rpx;
}

.map-btn {
	position: absolute;
	right: 20rpx;
	bottom: 20rpx;
	background-color: rgba(0, 122, 255, 0.8);
	color: #FFFFFF;
	font-size: 24rpx;
	padding: 10rpx 20rpx;
	border-radius: 30rpx;
}
</style> 